<template>
  <div class="phStore">
    <van-nav-bar left-arrow title="下载存储路径" @click-left="onClickLeft" />
    <div class="content">
      <div class="storetop">
        <span>手机存储</span>
        <p>总容量64G</p>
      </div>
      <van-progress
        inactive
        :percentage="80"
        :show-pivot="false"
        stroke-width="10px"
      />
      <van-button size="mini" plain @click="changePath"></van-button>
      <div class="storebot">
        <p>已用51.2G &nbsp;&nbsp;&nbsp;剩余12.8G</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    onClickLeft() {
      this.$router.push("/setting");
    },
    changePath() {
      Dialog.confirm({
        message: "已下载的课程存储路径不变，新下载课程存储在手机",
      })
        .then(() => {
          this.$router.push('/setting');
        })
        .catch(()=>{
          this.$toast('未改变存储路径');
        })
    },
  },
};
</script>
<style lang="scss">
.phStore {
  height: 100vh;
  text-align: left;
  .van-nav-bar {
    .van-icon {
      color: #000;
    }
  }
  .content {
    height: 15vh;
    width: 100vw;
    margin-top: 10px;
    background-color: #fff;

    .van-progress {
      left: 5%;
      top: 43%;
      width: 75%;
    }
    .van-button {
      right: -87vw;
      top: 3vh;
      border-radius: 12px;
    }
    .van-button--mini {
      width: 24px;
    }
    .van-button--default {
      border: 2px solid #ffcb00;
    }
    .van-button::before {
      background-color: #ffcb00;
      border-color: #ffcb00;
      opacity: 0.2;
    }
    .storetop {
      position: relative;
      span {
        display: inline-block;
        position: absolute;
        left: 5%;
        margin: 10px 0;
      }
      p {
        margin: 15px 0 10px 0;
        position: absolute;
        left: 24%;
        display: inline;
        font-size: 12px;
        color: #888;
      }
    }
    .storebot {
      p {
        position: absolute;
        top: 16%;
        left: 5%;
        display: inline;
        font-size: 12px;
        color: #888;
      }
    }
  }
}
</style>